$(function ()
{
    var viewport = $("#viewport")

    TileViewer.setViewportContainer(viewport);

    function setTileWrapper(x, y, info)
    { return function () { TileViewer.updateTile(x, y, info); } }

    var updateNumber = 0;
    var GetNextUpdate = function ()
    {
        setTimeout(function ()
        {
            $.ajax({
                url: "map/waitforupdates?lastupdate=" + updateNumber,
                success: updateHandler,
                error: function () { setTimeout(GetNextUpdate, 5000); }
            });
        }, 100);
    }
    var tileWidth = -1;
    var tileHeight = -1;
    var updateHandler = function (data)
    {
        GetNextUpdate();
        if (!data) { return; }
        updateNumber = data.UpdateNumber;
        var sx = data.CenterX;
        var sy = data.CenterY;
        if (data.TileWidth != tileWidth || data.TileHeight != tileHeight)
        {
            tileWidth = data.TileWidth;
            tileHeight = data.TileHeight;
            TileViewer.config({ "tileWidth": tileWidth, "tileHeight": tileHeight });
        }
        TileViewer.setCenterTile(sx, sy);
        for (var i = 0; i < data.TileUpdates.length; i++)
        {
            var tile = data.TileUpdates[i];
            if (tile.Img && tile.Img != "")
            { TileViewer.updateTile(tile.X, tile.Y, tile); }
            else
            { TileViewer.removeTile(tile.X, tile.Y); }
        }
    }

    TileViewer.setTileCreator(function ()
    {
        var tile = {
            "container": $("<div><img id='img'/><div id='shadow'></div></div>")
        };
        return tile;
    });

    var LightToOpacity = function (tile)
    {
        return 1 - Math.max(0, Math.min(1, tile.Light / 10));
    }

    TileViewer.setTileUpdator(function (tile, info, callback)
    {
        $("#img", tile.container).attr('src', "/tiles/" + info.Img);
        $("#shadow", tile.container).css({ opacity: LightToOpacity(info) });
        callback();
    });

    TileViewer.setTileResetter(function (tile, callback)
    {
        $("#img", tile.container).attr('src', "");
        $("#shadow", tile.container).css({ opacity: 0 });
        callback();
    });

    TileViewer.setConfigHandler(function (config, internalConfigInterface)
    {
        //do nothing
    });

    GetNextUpdate();
    
    function prefetchImagesHandler(data)
    {
        for(var i=0;i<data.length;i++)
        { prefetchImage("/tiles/" + data[i], 0); }
    }

    function prefetchImage(url, delay)
    {
        setTimeout(function(){
            try {
                var img = new Image();
                img.src = url;
            }
            catch (err){}
        }, delay);
    }
    setTimeout(function(){
        $.ajax({
            url: "map/PrefetchImages",
            success: prefetchImagesHandler,
        });
    }, 500);

    var animation =0;
    TileViewer.setAnimationDuration(animation);
   $(document).bind('keydown', 'a', function (){
        animation+= 50;
        if (animation > 500)
        {animation =0;}
        TileViewer.setAnimationDuration(animation);
        $().toastmessage('showNoticeToast', 'Animation delay set to: ' + animation);
   }); 
});